import React,{ useState } from 'react'
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native'
import { Toast, Provider } from '@ant-design/react-native';
import Header from './../components/Header'
import { useNavigation } from '@react-navigation/core'

interface Props {
  
}

const Register = (props: Props) => {
  const navigate = useNavigation()
  const [userName, setUserName] = useState('')
  const [passWord, setPassWord] = useState('')
  const [rePassWord, setRePassWord] = useState('')
  const [inpuCheck, setInpuCheck] = useState({user:true,pwd:true,repwd:true})
  const inputChange = (text:any,type:string) =>{
    switch (type) {
      case "username":
        setUserName(text)
        break;
      case "password":
        setPassWord(text)
        break; 
      case "repassword":
        setRePassWord(text)
        break;
      default:
        break;
    }
  }
  const inputCheck = (type:string) => {
    switch (type) {
      case "user":
        /^(?:(?:\+|00)86)?1\d{10}$/.test(userName) ? setInpuCheck({...inpuCheck,user:true}) : setInpuCheck({...inpuCheck,user:false})
        break ;
      case "pwd":
        break ;
      case "repwd":
        passWord === rePassWord ? setInpuCheck({...inpuCheck,repwd:true}) : setInpuCheck({...inpuCheck,repwd:false})
        break ;
      default:
        break ;
    }
  }
  const doRegister = () => {
    const url = "http://121.89.205.189/api/user/docheckphone"
    const request = new Request(url,{
      method:"POST",
      headers:{
        "Content-Type" : "application/json",
        Accept:"application/json"
      },
      body:JSON.stringify({tel:userName})
    })
    fetch(request).then(res => res.json()).then(res=> {
      if (res.code !== "200") {
        Toast.fail(res.message,3)
      } else {
        const registerReq = new Request ("http://121.89.205.189/api/user/dofinishregister",{
          method:"POST",
          headers:{
            "Content-Type" : "application/json",
            Accept:"application/json"
          },
          body:JSON.stringify({tel:userName, password:passWord})
        })
        fetch(registerReq).then(res => res.json())
        .then(res => {
          if(res.code === "200") {
            // navigate.navigate('/login')
          } else {
            Toast.fail(res.message)
          }
        })
      }
    })
  }

  return (
    <Provider>
      <View style={styles.container}>
        <View>
          <Header title="注册" />
        </View>
        <View style={styles.content}>
          <Text style={styles.titleText}>注册</Text>
          <View style={styles.loginBox}>
            <View>
              <TextInput 
                onChangeText={(text:any) => inputChange(text,'username') } 
                placeholder="请输入手机号" 
                style={styles.inputBox}
                onBlur = { () => inputCheck("user")}
              />
            </View>
            {
              inpuCheck.user ? null : <View style={styles.toast}><Text>手机号码不正确</Text></View>
            }
            <View>
              <TextInput
                onChangeText={text => inputChange(text,'password') } 
                placeholder="请输入密码" 
                style={styles.inputBox}
                onBlur = { () => inputCheck("pwd")}
              />
            </View>
            {
              inpuCheck.pwd ? null : <View style={styles.toast}><Text>手机号码不正确</Text></View>
            }
            <View>
              <TextInput
                onChangeText={text => inputChange(text,'repassword') } 
                placeholder="请重复密码" 
                style={styles.inputBox}
                onBlur = { () => inputCheck("repwd")}
              />
            </View>
            {
              inpuCheck.repwd ? null : <View style={styles.toast}><Text>重复密码不正确</Text></View>
            }
            <View style={styles.buttomBox}>
              <TouchableOpacity onPress={ doRegister } style={[styles.btnTextBox,{marginRight:5,backgroundColor:'#00caee'}]}>
                <View><Text style={styles.buttom}>注册</Text></View>
              </TouchableOpacity>
              <TouchableOpacity onPress={ ()=>{ navigate.navigate('/login') } } style={[styles.btnTextBox,{marginLeft:5,backgroundColor:'#00a5b4'}]}>
                <View><Text style={styles.buttom}>返回登录</Text></View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    </Provider>
  )
}

export default Register

const styles = StyleSheet.create({
  container:{
    display: 'flex',
    flex: 1
  },
  titleText:{
    fontSize:40,
    color: "#000000",
    fontWeight:'bold',
  },
  content:{
    display: 'flex',
    width: '100%',
    flex:9,
    // backgroundColor:'#f43',
    alignItems:'center',
    justifyContent:'center',
  },
  loginBox:{
    padding:20,
    backgroundColor:'#d8d8d8',
    borderRadius:15
  },
  inputBox:{
    width: 300,
    height: 50,
    backgroundColor:'#fff',
    margin: 10,
    paddingStart:20,
    borderRadius:25
  },
  buttomBox:{
    display: 'flex',
    flexDirection:'row',
    margin: 10,
    height: 50,
    alignItems:'center',
    justifyContent:'center',
  },
  btnTextBox:{
    flex: 1,
    display: 'flex',
    justifyContent:'center',
    alignItems:'center',
    height: 50,
    borderRadius:25,
  },
  buttom:{
    color: "#fff",
    fontSize:20,
    fontWeight:'bold'
  },
  toast:{
    paddingStart:20
  }
})
